<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <h2>学生年龄：{{ myAge }}</h2>
        <button @click="updateAge">更新我的年龄</button>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data(){
            return {
                msg: '我是一个尚硅谷的学生',
                myAge: this.age
            }
        },
        methods:{
            updateAge(){
                this.myAge += 1
            }
        },

        // 简单声明接收
        // props: ['name', 'sex', 'age']

        // 接收的同时对传递的数据进行类型限制
        // props:{
        //     name: String,
        //     sex: String,
        //     age: Number
        // }

        // 接收的同时对传递的数据进行类型限制 + 默认值的指定 + 必要性的限制
        props:{
            name: {
                type: String,       // name的类型是字符串
                required: true      // name是必要的
            },  
            age: {
                type: Number,
                default: 18         // 默认值是18
            },
            sex: {
                type: String,
                default: '男'
            }
        }
    }
</script>